<!-- 这个组件是用来显示卡片的用户的头像和用户名的 -->
<template>
	<view
		class="user"
		@click="ToPersonPage"
	>
		<view class="usericon">
			<u-image
				:src="avatarImg"
				:width="iconWidth"
				:height="iconHeight"
				@load="loadSuccess"
				@error="loadSuccess"
			></u-image>
		</view>
		<view class="username">
			<span>{{ author.username }}</span>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	props: {
		iconWidth: {
			type: String | Number,
			default: 24
		},
		iconHeight: {
			type: String | Number,
			default: 24
		},
		avatarImg: {
			type: String
		},
		author: {
			type: String | Object
		}
	},
	methods: {
		...mapState({
			userInfo: (state) => state.user.userInfo
		}),
		ToPersonPage() {
			const id = this.author._id;
			const uid = this.author.uid;
			const localId = this.userInfo().id;
			if (id === localId) {
				uni.navigateTo({
					url: '/pages/myCenter/myCenter'
				});
				return;
			}
			console.log(uid);
			uni.navigateTo({
				url: `/pages/personCenter/personCenter?id=${id}&uid=${uid}`
			});
		},
		loadSuccess() {
			console.log('加载成功了已经');
			uni.$emit('hideLoading');
		}
	},
	mounted() {}
};
</script>

<style lang="scss">
.user {
	display: flex;
	justify-content: center;
	align-items: center;
	.usericon {
		border-radius: 50%;
		overflow: hidden;
	}
	.username {
		font-family: 'Source Han Sans SC Normal';
		font-size: 12px;
		color: #999;
		margin-left: 20rpx;
	}
}
</style>
